<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>
    <select class="easyui-combogrid" style="width:250px;"
            data-options="
            width:250,
            panelWidth:450,
            idField:'productid',
            textField:'productname',
            data:data1,
            fitColumns: true,
            label: 'asdfasdf',
			multiple: true,
            columns:[[
                {field:'productid',title:'productid',width:60},
                {field:'productname',title:'productname',width:100},
                {field:'unitcost',title:'unitcost',width:120},
                {field:'status',title:'status',width:120},
                {field:'listprice',title:'listprice',width:120},
                {field:'attr1',title:'attr1',width:120},
                {field:'itemid',title:'itemid',width:100}
            ]]">
    </select>

    <script>
        var data1 = {
            "total": 28, "rows": [
                { "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
                { "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
                { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
                { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
                { "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
                { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
                { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
                { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
                { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
                { "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
            ]
        };
    </script>
    <br />
    <div>

        <div class="easyui-linkbutton" text="options" onclick="let options = $('#combogrid').combogrid('options');showTip(JSON.stringify(options));"></div>
        <div class="easyui-linkbutton" text="grid" onclick="let grid = $('#combogrid').combogrid('grid'); let selected = grid.datagrid('getSelected'); showTip(JSON.stringify(selected));"></div>
        <div class="easyui-linkbutton" text="setValue" onclick="$('#combogrid').combogrid('setValue',['001','007','你好呀!!!']);"></div>
        <div class="easyui-linkbutton" text="setValue" onclick="$('#combogrid').combogrid('setValue',{productid:'003',productname:'name003'});"></div>
        <div class="easyui-linkbutton" text="setValues" onclick="$('#combogrid').combogrid('setValues',['001','007']);"></div>
        <div class="easyui-linkbutton" text="setValues" onclick="$('#combogrid').combogrid('setValues',['001','007',{productid:'003',productname:'name003'}]);"></div>
        <div class="easyui-linkbutton" text="clear" onclick="$('#combogrid').combogrid('clear');"></div>
        <div class="easyui-linkbutton" text="disable" onclick="$('#combogrid').combogrid('disable');"></div>
        <div class="easyui-linkbutton" text="enable" onclick="$('#combogrid').combogrid('enable');"></div>
        <div class="easyui-linkbutton" text="readonly" onclick="$('#combogrid').combogrid('readonly',true);"></div>


        <div id="combogrid"></div>
        <script>
            $("#combogrid").combogrid({
                panelWidth: 450,
                panelHeigh: 300,
                idField: 'productid',
                textField: 'productname',
                url: null,
                method: 'get',

                lable: '标签文本',
                labelPosition: 'top',
                
                value: '测试的默认值',
                data: data1,
                delay: 3000,
                multiple: true,
                model: 'remote',/* 定义在文本更改时如何加载数据网格数据 */
                loadMsg: 'The message displayed when datagrid load remote data.',
                columns: [[
                    { field: 'productid', title: 'productid', width: 60 },
                    { field: 'productname', title: 'productname', width: 100 },
                    { field: 'unitcost', title: 'unitcost', width: 120 },
                    { field: 'status', title: 'status', width: 120 },
                    { field: 'listprice', title: 'listprice', width: 120 },
                    { field: 'attr1', title: 'attr1', width: 120 },
                    { field: 'itemid', title: 'itemid', width: 100 }
                ]],
                filter: function (q, row) {
                    var opts = $(this).combogrid('options');
                    return row[opts.textField].indexOf(q) == 0;
                },

                /* 事件与combo合datagrid相同 */
                onShowPanel: function () {
                    showTip('展开下拉框');
                }
                , onHidePanel: function () {
                    showTip('收起下拉框');
                }
                , onChange: function (newValue, oldValue) {
                    showTip('新值:' + newValue + ' 旧值:' + oldValue);
                }
            });
        </script>
    </div>

</body>
</html>